<div class="mc-bubble" [ngClass]="bubbleClasses" role="group" [attr.aria-label]="'Bubble.ariaLabel' | translate">
  <!-- 自定义头像区域 -->
  <div *ngIf="avatarTemplate" class="mc-bubble-avatar" role="img">
    <ng-container *ngTemplateOutlet="avatarTemplate"></ng-container>
    <ng-content select="[avatar]"></ng-content>
  </div>
  
  <!-- 默认头像配置 -->
  <div *ngIf="!avatarTemplate && avatarConfig"
    class="mc-bubble-avatar" role="img"
    [ngClass]="{ 'empty-avatar': isEmptyAvatar }"
  >
    <mc-avatar
      *ngIf="!isEmptyAvatar"
      [imgSrc]="avatarConfig?.imgSrc || ''"
      [name]="avatarConfig?.name || ''"
      [width]="avatarConfig?.width || 36"
      [height]="avatarConfig?.height || 36"
      [gender]="avatarConfig?.gender || ''"
    />
    <div *ngIf="isEmptyAvatar"    class="mc-bubble-avatar-wrapper" [attr.aria-label]="'Bubble.emptyAvatar' | translate"
         [style.width.px]="avatarConfig?.width || 36"
         [style.height.px]="avatarConfig?.height || 36"></div>
    <span *ngIf="avatarPosition === 'top'" class="mc-bubble-avatar-name" [attr.aria-label]="'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } ">{{
      avatarConfig?.displayName
    }}</span>
  </div>
  <div
    class="mc-bubble-content-container" aria-live="polite"
    [ngClass]="{ 'with-avatar': avatarTemplate || avatarConfig }"
  >
    <!-- 顶部内容投影 -->
    <ng-container *ngIf="!loading">
      <ng-container *ngTemplateOutlet="topTemplate"></ng-container>
      <ng-content select="[top]"></ng-content>
    </ng-container>
    
    <!-- 加载状态 -->
    <div *ngIf="loading" class="loading-container" role="status" aria-busy="true">
      <ng-container *ngIf="loadingTplTemplate; else defaultLoadingTemplate">
        <ng-container *ngTemplateOutlet="loadingTplTemplate"></ng-container>
        <ng-content select="[loadingTpl]"></ng-content>
      </ng-container>
      <ng-template #defaultLoadingTemplate>
        <mc-bubble-loading></mc-bubble-loading>
      </ng-template>
    </div>
    
    <!-- 主要内容 -->
    <div
      *ngIf="!loading"
      class="mc-bubble-content"
      [ngClass]="[variant]"
      role="region"
    >
      <ng-content></ng-content>
      <ng-container *ngIf="content && !ngContentProjected">
        <span [attr.aria-label]="'Bubble.content' | translate">{{ content }}</span>
      </ng-container>
    </div>
    
    <!-- 底部内容投影 -->
    <ng-container *ngIf="!loading">
      <ng-container *ngTemplateOutlet="bottomTemplate"></ng-container>
      <ng-content select="[bottom]"></ng-content>
    </ng-container>
  </div>
</div>
